<template>
  <div class="retrieve-box">
    <el-main height="auto" class="formData-box">
      <div class="main">
        <el-header>重置密码</el-header>
        <div class="tip" v-show="$route.query.reset">
          由于您密码安全性低，请进行密码重新设置。
        </div>
        <el-form
          ref="ruleForm"
          :rules="rules"
          label-width="150px"
          :model="ruleForm"
        >
          <el-form-item prop="loginName" label="用户名">
            <el-input
              type="text"
              v-model="ruleForm.loginName"
              placeholder="请输入用户名"
              autocomplete="new-password"
              clearable
            />
          </el-form-item>
          <el-form-item prop="newPassword" label="新密码">
            <el-input
              type="password"
              v-model="ruleForm.newPassword"
              autocomplete="new-password"
              auto-complete="off"
              placeholder="请输入新密码"
              clearable
              show-password
            />
          </el-form-item>
          <el-form-item prop="newPasswordSecond" label="确认密码">
            <el-input
              type="password"
              show-password
              v-model="ruleForm.newPasswordSecond"
              placeholder="确认密码"
              clearable
            />
          </el-form-item>
          <!-- <el-form-item prop="phone" label="手机号">
            <el-input
              v-model="ruleForm.phone"
              placeholder="请输入手机号"
              clearable
            />
          </el-form-item> -->
          <el-form-item prop="verificationCode" label="手机短信验证码">
            <el-input
              v-model="ruleForm.verificationCode"
              oninput="value=value.replace(/[^\d]/g,'')"
              placeholder="请输入手机短信验证码"
              clearable
            />
            <el-button
              @click="sendCode"
              type="primary"
              :loading="codeLoading"
              :disabled="sendCodeDiabled"
              maxlength="6"
              >{{ sendCodeTitle }}</el-button
            >
          </el-form-item>

          <el-form-item>
            <el-button type="primary" @click="getCode">确认</el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-main>
  </div>
</template>
<script>
import {phone} from '@const/formValidate.js'
import {
  sendVerificationCode,
  updatePasswordByPhone,
  sendVerificationCodeByLoginName
} from '@const/api_staffCenter.js'
import md5 from 'js-md5'
import {sendCodeRetrieve, putRetrieve} from '@const/api_aggregation.js'
const TIME_COUNT = 60
export default {
  layout: 'login',
  name: 'Retrieve',
  data() {
    var validatePassUserName = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入用户名'))
      } else {
        callback()
      }
    }
    var validatePassUserName = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入手机短信验证码'))
      } else {
        callback()
      }
    }
    let checkUserName = [{validator: validatePassUserName, trigger: 'blur'}]
    let checkCode = [{validator: validatePassUserName, trigger: 'blur'}]
    var validatePass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入密码'))
      } else {
        if (this.ruleForm.newPasswordSecond !== '') {
          this.$refs.ruleForm.validateField('checkPass')
        }
        callback()
      }
    }
    var validatePass2 = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入密码'))
      } else if (value !== this.ruleForm.newPassword) {
        callback(new Error('两次输入密码不一致!'))
      } else {
        callback()
      }
    }
    return {
      codeLoading: false, // 验证码按钮loading
      // 忘记密码发送验证码携带的前缀
      prefix: 'forgetPasswordVerificationcode',
      ruleForm: {
        loginName: '',
        phone: '',
        verificationCode: '',
        newPassword: '',
        newPasswordSecond: ''
      },
      rules: {
        loginName: checkUserName,
        phone: phone(),
        newPassword: [
          {validator: validatePass, trigger: 'blur'},
          {
            pattern: /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,16}$/,
            message: '密码为6-16位数字字母组合'
          }
        ],
        newPasswordSecond: [
          {validator: validatePass2, trigger: 'blur'},
          {
            pattern: /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,16}$/,
            message: '密码为6-16位数字字母组合'
          }
        ],
        checkPass: [{validator: validatePass2, trigger: 'blur'}],
        verificationCode: checkCode
      },
      count: '',
      sendCodeTitle: '验证码',
      sendCodeDiabled: false
    }
  },
  mounted() {
    this.ruleForm.loginName = this.$route.query.name
  },
  methods: {
    countDown() {
      if (this.sendCodeDiabled) return
      this.sendCodeDiabled = true
      this.count = TIME_COUNT
      let timer = setInterval(() => {
        if (this.count > 0 && this.count <= TIME_COUNT) {
          this.count--
          this.sendCodeTitle = `${this.count}秒后重新获取`
        } else {
          this.sendCodeTitle = '重新获取'
          this.timer = null
          this.sendCodeDiabled = false
          clearInterval(timer)
        }
      }, 1000)
    },
    getCode() {
      this.$refs['ruleForm'].validate(valid => {
        if (valid) {
          let data = {
            loginName: this.ruleForm.loginName,
            newPassword: md5(this.ruleForm.newPassword),
            // phone: this.ruleForm.phone,
            verificationCode: this.ruleForm.verificationCode
          }
          this.submitLoading = true
          this.$axios({
            url: updatePasswordByPhone,
            method: 'post',
            data
          })
            .then(res => {
              this.$message({type: 'success', message: '密码修改成功'})
              this.$router.push(this.$PATH_CONST.login_page)
            })
            .finally(res => {
              this.submitLoading = false
            })
        } else {
          // this.$message({type: 'error', message: '密码输入有误'})
        }
      })
    },
    sendCode() {
      // if (!this.ruleForm.phone) {
      //   this.$message({type: 'warning', message: '请先输入手机号码'})
      //   return
      // }
      // this.ruleForm.phone = '17319299097'
      this.codeLoading = true
      this.$axios({
        method: 'post',
        url: sendVerificationCodeByLoginName,
        data: {
          loginName: this.ruleForm.loginName
          // prefix: this.prefix
        }
      })
        .then(data => {
          if (data.data.code * 1 === 0) {
            this.$message({
              message: `验证码已下发到您尾号${data.data.payload}的手机号，请注意查收`,
              type: 'success'
            })
            this.countDown()
          }
        })
        .finally(() => {
          this.codeLoading = false
        })
    },
    goLogin() {
      this.$router.push(this.$PATH_CONST.login_page)
    }
  }
}
</script>
<style lang="less">
@import '../m-front-common/pc/assets/var.less';

.retrieve-box {
  min-height: 90vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #f4f6fb;
  background-image: none;

  .el-main {
    padding-top: 30px;

    .el-input {
      width: 320px;
      font-size: 16px;
    }
  }

  .main {
    position: relative;
    width: 770px;
    min-height: 570px;
    margin: 0 auto;
    padding: 30px;
    background-color: #fff;

    .tip {
      text-indent: 20px;
    }

    .el-header {
      font-size: 22px;
    }

    .login-title {
      position: absolute;
      right: 0;
      top: -37px;
    }

    .main-title {
      margin-bottom: 20px;
      font-size: 21px;
      font-weight: 400;
      color: @defaultFontColor;
    }

    .el-form-item__label {
      font-size: 16px;
    }

    .el-form {
      margin-top: 50px;
      margin-left: 80px;
    }
  }
}
</style>
